<script>
	let name = 'world';
	let a = 1;
	let b = 2;
	let yes = false;
</script>

<div class="grid items-center justify-center bg-gray-200 text-yellow-800 my-5 py-5">
	<input class=" border" bind:value={name} />

	<h1>Hello {name}!</h1>

	<label>
		<input type="number" bind:value={a} min="0" max="10" />
		<input type="range" bind:value={a} min="0" max="10" />
	</label>

	<label>
		<input type="number" bind:value={b} min="0" max="10" />
		<input type="range" bind:value={b} min="0" max="10" />
	</label>

	<p>{a} + {b} = {a + b}</p>
	<hr />
	<label>
		<input type="checkbox" bind:checked={yes} />
		Yes! Send me regular email spam
	</label>

	{#if yes}
		<p>Thank you.</p>
	{:else}
		<p>Miss you!</p>
	{/if}

	<button class="bg-gray-500" disabled={!yes}>Subscribe</button>
</div>
